<template>
    <a-form :model="formState" :label-col="{ style: { width: '80px' } }" style="width:1000px">
        <a-row :gutter="24" type="flex">
            <a-col flex="200px">
                <a-form-item>
                    <a-upload :disabled="formDisable" list-type="picture-card" class="avatar-uploader" :show-upload-list="false" :before-upload="()=>{return false}" @change="handleChange">
                        <img v-if="formState.icon" :src="formState.icon" alt="avatar" />
                        <div v-else>
                            <plus-outlined style="font-size:40px;color:#999"></plus-outlined>
                            <div class="ant-upload-text" style="font-size:18px;padding: 10px 0 0 0;color:#999">上传 Logo</div>
                        </div>
                    </a-upload>
                </a-form-item>
            </a-col>
            <a-col flex="auto">
                <a-form-item name="key" label="关键字" :rules="[{ required: true, message: '请输入关键字' }]">
                    <a-input :disabled="formDisable" v-model:value="formState.key"></a-input>
                </a-form-item>
                <a-form-item name="title" label="标题" :rules="[{ required: true, message: '请输入标题' }]">
                    <a-input :disabled="formDisable" v-model:value="formState.title"></a-input>
                </a-form-item>

                <a-row :gutter="24">
                    <a-col :span="12">
                        <a-form-item name="width" label="宽度" :rules="[{ required: true, message: '请输入宽度' }]">
                            <a-input-number :disabled="formDisable" style="width:100%" :min="800" :max="1920" v-model:value="formState.width"></a-input-number>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item name="height" label="高度" :rules="[{ required: true, message: '请输入高度' }]">
                            <a-input-number :disabled="formDisable" style="width:100%" :min="600" :max="1080" v-model:value="formState.height"></a-input-number>
                        </a-form-item>
                    </a-col>
                </a-row>

                <a-form-item name="description" label="备注">
                    <a-textarea :disabled="formDisable" v-model:value="formState.description" :auto-size="{ minRows: 4, maxRows: 5 }"></a-textarea>
                </a-form-item>
                <a-button type="primary" style="float:right" @click="addVersion">添加新版本</a-button>

            </a-col>
            <a-col :span="24" v-for="item in formState.version"><br><br>
                <div style="padding:15px;background-color:#FFF">
                    <a-descriptions bordered size="small" :labelStyle="{width:'100px'}" :column="2">
                        <template #title>
                            <span style="font-size:20px;padding:0 0 0 3px">v{{item.version}}</span>
                        </template>
                        <a-descriptions-item label="创建时间" :span="2">{{item.date}}</a-descriptions-item>
                        <a-descriptions-item label="更新">
                            <div v-for="item in item.update">{{item}}</div>
                        </a-descriptions-item>
                        <a-descriptions-item label="修复">
                            <div v-for="item in item.debug">{{item}}</div>
                        </a-descriptions-item>
                    </a-descriptions>
                </div>
            </a-col>
        </a-row>
        <a-modal v-model:visible="visible" :confirm-loading="buttonLoading" title="添加新版本" @ok="handleOk">
            <Version :Version="VersionItem" ref="newVersion"></Version>
        </a-modal>
    </a-form>
</template>
<script setup>
import PlusOutlined from '@ant-design/icons-vue/PlusOutlined';
import Version from './Version.vue'
// import axios from 'axios';
import { ref } from 'vue';
import { message } from 'ant-design-vue';

import apis from './apis'

import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
dayjs.locale('zh-cn');



const VersionItem = ref({
    file: '',
    date: dayjs().format('YYYY-MM-DD HH:mm:ss'),
    FileName: '',
    version: '',
    update: [],
    debug: []
});

const formState = ref({
    icon: '',
    key: '',
    description: '',
    width: '',
    height: '',
    version: [],
});

const addVersion = () => {
    var version = '1.0.0';
    if (formState.value.version[0]) {
        var _arr = formState.value.version[0].version.split('.');
        _arr[_arr.length - 1] = parseInt(_arr[_arr.length - 1]) + 1;
        version = _arr.join('.');
    };
    VersionItem.value = {
        file: '',
        date: dayjs().format('YYYY-MM-DD HH:mm:ss'),
        FileName: '',
        version: version,
        update: [],
        debug: []
    };

    visible.value = true;
    setTimeout(() => {
        newVersion.value.ClearFiles();
    }, 1)
}

const handleChange = info => {
    const reader = new FileReader();
    reader.addEventListener('load', () => {
        formState.value.icon = reader.result
    });
    reader.readAsDataURL(info.file);
};

const beforeUpload = file => {
    return false
};

const formDisable = ref(true);
const newVersion = ref(null);
const visible = ref(false);
const buttonLoading = ref(false);
const handleOk = function () {
    buttonLoading.value = true;
    newVersion.value.Sublimt((data) => {
        if (formDisable.value) {
            var _data = JSON.parse(JSON.stringify(data));
            !_data.update && (_data.update = []);
            !_data.debug && (_data.debug = []);
            apis.AddVersion(formState.value.key, _data).then(res => {
                apis.GetApp(formState.value.key).then(res => {
                    buttonLoading.value = false;
                    visible.value = false;
                    formState.value.version = res.data.index
                });
            });
        } else {
            buttonLoading.value = false;
            visible.value = false;
            formState.value.version.unshift(JSON.parse(JSON.stringify(data)));
        }
    });
    return false
}


const SetContentValue = (val) => {
    formState.value = { ...val };
    formDisable.value = !!val.key;
    buttonLoading.value = false;
}

const getContentValue = (callback) => {
    if (!formState.value.icon) {
        message.error('必须上传图片');
    } else if (!formState.value.version.length) {
        message.error('必须上传一个以上版本');
    } else {
        callback(JSON.parse(JSON.stringify(formState.value)));
    }
}

defineExpose({
    SetContentValue,
    getContentValue,
})


</script>
<style scoped>
.ContentView {
    padding: 20px;
    position: relative;
}

:deep(.ant-upload.ant-upload-select-picture-card) {
    width: 160px;
    height: 160px;
}

:deep(.ant-upload.ant-upload-select-picture-card img) {
    width: 140px;
    height: 140px;
}

.detail {
    position: absolute;
    left: 178px;
    top: 20px;
    right: 20px;
}
</style>